const data = [
{image:'./images/image1.jpg',bgc:'#896f51',title:'分享美好生活记录赢万元红包奖金！'},
{image:'./images/image2.jpg',bgc:'#4a4557',title:'痛击我方仅剩队友'},
{image:'./images/image3.jpg',bgc:'#18190d',title:'探险东南亚，闯入蟒蛇聚集地！ '},
{image:'./images/image4.jpg',bgc:'#b28463',title:'知名画师联名，B站首部原创插画集上线！ '},
{image:'./images/image5.jpg',bgc:'#746e6d',title:'二次元，但我来扮演>>> '},
{image:'./images/image6.jpg',bgc:'#563e37',title:'余文乐首支独家vlog来啦！ '},
{image:'./images/image7.jpg',bgc:'#622a20',title:'去过一个好吃的春天吧！带话题投稿瓜分万元贝壳金~ '},
{image:'./images/image8.jpg',bgc:'#8d8ea9',title:'白色情人节，想与你一直在一起~ '},
{image:'./images/image9.jpg',bgc:'#291c27',title:'「乐迷圆梦计划」B站送你去看演出啦！ '}
]

// 将16进制转换成rgb
let ragArr = function(hexStr){

    hexStr = hexStr.replace("#","")
    let arr = []

    for (let index = 0; index < 6;) {
        arr.push(Number.parseInt(hexStr.substring(index,index+2),16))
        index+=2
    }
    return arr;
}


let indexLi = "";
for(let i=0;i<data.length;i++){
    indexLi += `<li data-id=${i}></li>`
}

let banner = document.querySelector('.banner');
let img = banner.querySelector("img");
let bottom = banner.querySelector('.bottom');
let title = bottom.querySelector('p');
let indexUl = banner.querySelector('.index ul')

let index = 0;
indexUl.innerHTML = indexLi


// 设置默认第一个被选中
let wait = banner.querySelector(`.index ul li:nth-child(1)`)
wait.classList.add('active')
let taskId = setInterval(() => {
    changeRight()
}, 1000);


banner.addEventListener("mouseenter",() => {
    clearInterval(taskId);
})

banner.addEventListener("mouseleave",() => {
    // 为了避免异常 每次都清除一下定时任务
    clearInterval(taskId)
    taskId = setInterval(() => {
        changeRight()
    }, 1000);
})

const arr = ['河北','上海','北京'];
const newArr = arr.map((item) => {
    return item+"好啊!"
});

console.log(newArr)




let changeLeft = function(){
    index--
    if(index < 0){
        index = data.length - 1
    }
    change(index)
}

let changeRight =  function(){
    index++
    if(index >= data.length){
        index = 0
    }
    change(index)
}


let change = function (index){
    banner.style.backgroundColor = data[index].bgc
    img.src = data[index].image;
    let shadow = banner.querySelector('.shadow')
    let arr = ragArr(data[index].bgc)
    shadow.style.backgroundImage = `linear-gradient(rgba(0,0,0,0),rgba(${arr[0]}, ${arr[1]}, ${arr[2]},1))`;
    title.innerText = data[index].title;

    let active =  banner.querySelector('.index ul .active')
    if(active !== null){
        active.classList.remove('active')
    }

    let wait = banner.querySelector(`.index ul li:nth-child(${index + 1})`)
    wait.classList.add('active')
}


let left = bottom.querySelector('.icon-a-leftarrow')
left.addEventListener("click",() => {
    changeLeft()
})

let right = bottom.querySelector('.icon-a-RightArrow')
right.addEventListener('click',() => {
    changeRight()
})

let liArr = indexUl.querySelectorAll('li')
liArr.forEach(p => {
    p.addEventListener('click',() => {
        index = +p.dataset.id
        change(index)
    })
    p.addEventListener('mouseenter',() => {
        index = +p.dataset.id
        change(index)
    })
})
